<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/style.css">
</head>

<style>
    .borderyellow {
        width: 260px;
        height: 360px;
        border: 2px solid #d4a258;
        margin-right: 30px;
        border-radius: 5px;
    }
    
    .imghover {
        transition: all 0.4s;
    }
    
    .imghover:hover {
        transform: scale(1.1);
    }
    
    .divover {
        overflow: hidden;
    }
    
    .divhover {
        transition: all 0.6s;
    }
    
    .divhover:hover {
        border-color: black;
        box-shadow: 6px 6px #d4a258;
    }
</style>

<body>
    <!--导航-->
    <div class="container">
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
                    <a class="navbar-brand" href="index.html">旅游推荐</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="旅游路线.html">旅游路线</a></li>
                        <li><a href="地方简述.html">地方简述</a></li>
                        <li>
                            <a href="旅游好书.html">旅游好书 </a>
                        </li>
                        <li><a href="路线选取.html">路线选取</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>


    <!--分割线-->
    <div class="container">
        <hr style="margin: 25px 0;" />
    </div>

    <!-- Topic Header -->

    <!-- 路径导航 -->
    <div class="topic">


        <ol class="breadcrumb  ">
            <li><a href="index.html">首页</a></li>
            <li class="active">路线选取</li>
        </ol>


    </div>

    <!--分割线-->
    <div class="container">
        <hr style="margin: 25px 0;" />
    </div>



    <!-- 左边手风琴示例 -->
    <div class="container">
        <div class="row">

            <div class="col-lg-3">

                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingOne">
                            <h4 class="panel-title">
                                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            旅游注意小Tips<span class="caret"></span>
                          </a>
                            </h4>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                            <div class="panel-body">
                                各地的饮食文化都有地方特色，外出游玩吃也是一项大事，能品味到各地的特色饮食，因为水土的原因，各的瓜果又是各不相同，也正是因为这个，自然也就出现了一方水土养一方人的饮食文化，所以在吃上要尽量保有自已的饮食特点，做好合理搭配，不要为了品尽别处风味，而出现水土不不符或过敏的尴尬。
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingTwo">
                            <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                           旅游典故
                          </a>
                            </h4>
                        </div>
                    </div>

                    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                        <div class="panel-body">
                            旅行游览。南朝梁沈约《悲哉行》：“旅游媚年春，年春媚游人。”唐王勃《涧底寒松赋》：“岁八月壬子旅游于蜀，寻茅溪之涧。”宋无名氏《异闻总录》卷一：“临川画工黄生，旅游如广昌，至秩巴寨，卒长郎巖馆之。”明吴承恩《著》：“东园公初晋七袠，言开曼龄，是日高宴……会有京华旅游淮海浪士，闻之欢喜。”《人民文学》1981年第3期：“旅游事业突起后，就有人在半山寺开设茶水站。
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingThree">
                            <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="index.html" aria-expanded="false" aria-controls="collapseThree">
                            返回首页 <span class="	glyphicon glyphicon-home"></span>
                          </a>
                            </h4>

                        </div>

                    </div>
                </div>


            </div>
            <!-- col -->





            <div class="col-lg-3 ">
                <a href="#" class="thumbnail">
                    <img src="images/桂林4.jpg" class="imghover divover" style="width: 100%;">
                </a>
            </div>

            <div class="col-lg-3 ">
                <a href="#" class="thumbnail">
                    <img src="images/大理3.jfif" class="imghover divover" style="width: 100%;">
                </a>
            </div>
            <div class="col-lg-3 ">
                <a href="#" class="thumbnail">
                    <img src="images/桂林3.jpg" class="imghover divover" style="width: 100%;">
                </a>
            </div>




            <div class="col-lg-3 ">
                <a href="#" class="thumbnail">
                    <img src="images/丽水10.jfif" class="imghover divover" style="width: 100%;">
                </a>
            </div>

            <div class="col-lg-3 ">
                <a href="#" class="thumbnail">
                    <img src="images/丽水8.jfif" class="imghover divover" style="width: 100%;">
                </a>
            </div>

            <div class="col-lg-3 ">
                <a href="#" class="thumbnail">
                    <img src="images/丽水5.jpg" class="imghover divover" style="width: 100%;">
                </a>
            </div>



            <div class="col-lg-9 col-lg-offset-3  col-md-6 text-center">
                <h3>挑选你最心仪的路线Plan</h3>
                <hr style="margin: 25px 0;" />
                <p>

                </p>
                <hr style="margin: 25px 0;" />


            </div>


            <!-- col -->

        </div>
        <!--  row -->

    </div>
    <!--container -->

    <!-- 鼠标拖拽 -->
    <div class="container">


        <div class="row">
            <div class="col-lg-3 col-sm-12 col-md-4 col-lg-offset-3 borderyellow divhover">
                <h2>挑选Plan</h2>
                <p id="p1" draggable="true">丽水路线</p>
                <p id="p2" draggable="true">大理候选</p>
                <p id="p3" draggable="true">拉萨候选</p>
                <p id="p4" draggable="true">桂林路线</p>
                <p id="p5" draggable="true">海南路线</p>
            </div>
            <div class="col-lg-3 col-sm-12 col-md-4 borderyellow divhover ">
                <h2>挑选Plan</h2>
                <p id="p1" draggable="true">海南候选</p>
                <p id="p2" draggable="true">丽水候选</p>
                <p id="p3" draggable="true">拉萨路线</p>
                <p id="p4" draggable="true">桂林候选</p>
                <p id="p5" draggable="true">拉萨路线</p>
            </div>
            <div class="col-lg-3 col-sm-12 col-md-4 borderyellow divhover ">
                <h2>挑选完成</h2>
            </div>


        </div>


    </div>

    <!--分割线-->
    <div class="container">
        <hr style="margin: 20px 0;" />
    </div>


    <!-- 底部分页 -->
    <div class="container text-center">


        <nav aria-label="...">
            <ul class="pagination">
                <li class="disabled">
                    <span>
                          <span aria-hidden="true">&laquo;</span>
                    </span>
                </li>
                <li class="active">
                    <a href="index.html"><span>1 </span></a>
                </li>
                <li>
                    <a href="旅游路线.html"><span>2 </span></a>
                </li>
                <li>
                    <a href="地方简述.html"><span>3 </span></a>
                </li>
                <li>
                    <a href="旅游好书.html"><span>4 </span></a>
                </li>
                <li>
                    <a href="路线选取.html"><span>5 </span></a>
                </li>
            </ul>
        </nav>


    </div>




</body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    document.ondragstart = function(event) {
        event.dataTransfer.setData('text/html', event.target.id);
    }
    document.ondrag = function(event) {
        console.log('进行中');
    }
    document.ondragend = function(event) {
        console.log('结束');
    }
    document.ondragenter = function(event) {
        console.log('在容器范围');
        console.log(event.target);
    }
    document.ondragover = function(event) {
        console.log('悬停');
        return false;
    }
    document.ondragleave = function() {
        console.log('离开容器');
    }
    document.ondrop = function(event) {
        console.log('释放进入新容器');
        var id = event.dataTransfer.getData('text/html');
        event.target.appendChild(document.getElementById(id));
    }
</script>

</html>